<template>
	<view class="addSpecificationPage">
		<!--  -->

		<view class="addSpecificationContent">
			<view class="font-weight_bold">
				支付类型
			</view>
			<view class="myNmae flex-between margin-top_30rpx">
				<view style="margin-left:-20rpx;" class="">
					<radio-group style="transform:scale(0.9) " @change="radioChange" class="flex-start-center ">
						<label class="flex-start-center  margin-right_16rpx" v-for="(item, index) in items"
							:key="item.value">
							<view>
								<radio :value="item.value" :checked="index+1 == pay_type" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>

			</view>

			<block v-if="pay_type=='1'">
				<view class="font-weight_bold margin-top_40rpx">
					公众号appid
				</view>
				<view class="edit flex-start-center padding-left_30rpx margin-top_16rpx">
					<input class="uni-input" v-model="form.appid" placeholder="请输入公众号appid" />


				</view>
				<view class="margin-top_10rpx">
					<text style="color: rgb(102, 102, 102);" class=""></text>
				</view>
				<view class="font-weight_bold margin-top_40rpx">
					公众号appsecret
				</view>
				<view class="edit flex-start-center padding-left_30rpx margin-top_16rpx">
					<input class="uni-input" v-model="form.appSecret" placeholder="请输入公众号appsecret" />


				</view>
				<view class="margin-top_10rpx">
					<text style="color: rgb(102, 102, 102);" class=""></text>
				</view>
				<view class="font-weight_bold margin-top_40rpx">
					支付商户号
				</view>
				<view class="edit flex-start-center padding-left_30rpx margin-top_16rpx">
					<input class="uni-input" v-model="form.mch_id" placeholder="请输入支付商户号" />


				</view>
				<view class="margin-top_10rpx">
					<text style="color: rgb(102, 102, 102);" class=""></text>
				</view>
				<view class="font-weight_bold margin-top_40rpx">
					支付V3密钥
				</view>
				<view class="edit flex-start-center padding-left_30rpx margin-top_16rpx">
					<input class="uni-input" v-model="form.apikey" placeholder="请输入支付V3密钥" />


				</view>
				<view class="margin-top_10rpx">
					<text style="color: rgb(102, 102, 102);" class=""></text>
				</view>

				<view class="margin-top_10rpx">
					<text style="color: rgb(102, 102, 102);" class=""> </text>
				</view>
				<view class="font-weight_bold margin-top_40rpx">
					证书序列号
				</view>
				<view class="edit flex-start-center padding-left_30rpx margin-top_16rpx">
					<input class="uni-input" v-model="form.serial_number" placeholder="请输入证书序列号" />


				</view>
				<view class="margin-top_10rpx">
					<text style="color: rgb(102, 102, 102);" class=""> </text>
				</view>
				<!-- <view class="font-weight_bold margin-top_40rpx">
					打款类型
				</view>
				<view class="myNmae flex-between margin-top_30rpx">
					<view style="margin-left:-20rpx;" class="">
						<radio-group style="transform:scale(0.9) " @change="radioChange1" class="flex-start-center ">
							<label class="flex-start-center  margin-right_16rpx"
								v-for="(item, index) in paymentTypeItems" :key="item.value">
								<view>
									<radio :value="item.value" :checked="index+1 == form.transfer_type" />
								</view>
								<view>{{item.name}}</view>
							</label>
						</radio-group>
					</view>

				</view> -->
				<view class="font-weight_bold margin-top_40rpx">
					cert文件
				</view>
				<sunui-upimg1 class="margin-top_20rpx" :border="'1px dashed #bfbfbf'" :formData="imgFormData"
					:storageMode="storageMode" :header="header" :size="['200rpx', '200rpx']" btnName="上传cert文件"
					:uploadServerUrl="upPicUrl" ref="selectimgandupload1" @uploaded="imgLoaded1" @change="imgsChange1"
					:maxFileNumber="1"><template v-slot:icon>
						<uni-icons type="camera-filled" color="#1890FF" size="40"></uni-icons>
					</template></sunui-upimg1>
				<view class="margin-top_10rpx">
					<text style="color: rgb(102, 102, 102);" class=""> 只能上传cert/pem文件，且不超过500kb</text>
				</view>
				<view class="font-weight_bold margin-top_40rpx">
					key文件
				</view>
				<sunui-upimg1 class="margin-top_20rpx" :border="'1px dashed #bfbfbf'" :formData="imgFormData2"
					:storageMode="storageMode" :header="header" :size="['200rpx', '200rpx']" btnName="上传key文件"
					:uploadServerUrl="upPicUrl" ref="selectimgandupload2" @uploaded="imgLoaded2" @change="imgsChange2"
					:maxFileNumber="1"><template v-slot:icon>
						<uni-icons type="camera-filled" color="#1890FF" size="40"></uni-icons>
					</template></sunui-upimg1>
				<view class="margin-top_10rpx">
					<text style="color: rgb(102, 102, 102);" class=""> 只能上传cert/key文件，且不超过500kb</text>
				</view>
			</block>
			<block v-if="pay_type=='2'">
				<view class="font-weight_bold margin-top_40rpx">
					商户号
				</view>
				<view class="edit flex-start-center padding-left_30rpx margin-top_16rpx">
					<input class="uni-input" v-model="form1.sp_mchid" placeholder="请输入商户号" />


				</view>
				<view class="margin-top_10rpx">
					<text style="color: rgb(102, 102, 102);" class=""></text>
				</view>
				<view class="font-weight_bold margin-top_40rpx">
					商户appid
				</view>
				<view class="edit flex-start-center padding-left_30rpx margin-top_16rpx">
					<input class="uni-input" v-model="form1.sp_appid" placeholder="请输入商户appid" />


				</view>
				<view class="font-weight_bold margin-top_40rpx">
					子商户appID
				</view>
				<view class="edit flex-start-center padding-left_30rpx margin-top_16rpx">
					<input class="uni-input" v-model="form1.m_appid" placeholder="请输入子商户appID" />


				</view>
				<view class="margin-top_10rpx">
					<text style="color: rgb(102, 102, 102);" class=""></text>
				</view>
				<view class="font-weight_bold margin-top_40rpx">
					子商户号
				</view>
				<view class="edit flex-start-center padding-left_30rpx margin-top_16rpx">
					<input class="uni-input" v-model="form1.m_mch_id" placeholder="请输入子商户号" />


				</view>
				<view class="margin-top_10rpx">
					<text style="color: rgb(102, 102, 102);" class=""></text>
				</view>

				<view class="font-weight_bold margin-top_40rpx">
					公众号appsecret
				</view>
				<view class="edit flex-start-center padding-left_30rpx margin-top_16rpx">
					<input class="uni-input" v-model="form.appSecret" placeholder="请输入公众号appsecret" />


				</view>
				<view class="font-weight_bold margin-top_40rpx">
					支付v3密钥
				</view>
			
				<view class="edit flex-start-center padding-left_30rpx margin-top_16rpx">
					<input class="uni-input" v-model="form1.m_apikey" placeholder="请输入支付v3密钥" />


				</view>
				<view class="font-weight_bold margin-top_40rpx">
					v2密钥
				</view>
							
				<view class="edit flex-start-center padding-left_30rpx margin-top_16rpx">
					<input class="uni-input" v-model="form1.s_apikey2" placeholder="请输入v2密钥" />
				
				
				</view>
					
				<view class="font-weight_bold margin-top_40rpx">
					证书序列号
				</view>
				<view class="edit flex-start-center padding-left_30rpx margin-top_16rpx">
					<input class="uni-input" v-model="form1.m_serial_number" placeholder="请输入证书序列号" />


				</view>
				<view class="margin-top_10rpx">
					<text style="color: rgb(102, 102, 102);" class=""> </text>
				</view>

				<view class="font-weight_bold margin-top_40rpx">
					cert文件
				</view>
				<sunui-upimg1 class="margin-top_20rpx" :border="'1px dashed #bfbfbf'" :formData="imgFormData"
					:storageMode="storageMode" :header="header" :size="['200rpx', '200rpx']" btnName="上传cert文件"
					:uploadServerUrl="upPicUrl" ref="selectimgandupload1" @uploaded="imgLoaded1" @change="imgsChange1"
					:maxFileNumber="1"><template v-slot:icon>
						<uni-icons type="camera-filled" color="#1890FF" size="40"></uni-icons>
					</template></sunui-upimg1>
				<view class="margin-top_10rpx">
					<text style="color: rgb(102, 102, 102);" class=""> 只能上传cert/pem文件，且不超过500kb</text>
				</view>
				<view class="font-weight_bold margin-top_40rpx">
					key文件
				</view>
				<sunui-upimg1 class="margin-top_20rpx" :border="'1px dashed #bfbfbf'" :formData="imgFormData2"
					:storageMode="storageMode" :header="header" :size="['200rpx', '200rpx']" btnName="上传key文件"
					:uploadServerUrl="upPicUrl" ref="selectimgandupload2" @uploaded="imgLoaded2" @change="imgsChange2"
					:maxFileNumber="1"><template v-slot:icon>
						<uni-icons type="camera-filled" color="#1890FF" size="40"></uni-icons>
					</template></sunui-upimg1>
				<view class="margin-top_10rpx">
					<text style="color: rgb(102, 102, 102);" class=""> 只能上传cert/key文件，且不超过500kb</text>
				</view>
			</block>
		</view>

		<view class="flex " style="margin: 40rpx 0 15rpx;">
			<!-- 	<view class="reset flex">
				重置
			</view> -->
			<view class="confirm flex" @click="submit()">
				确定
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				tabIndex: 4,
				changeValue: '',
				// 支付类型
				pay_type: '1',
				imgFormData: null,
				imgFormData2: null,
				storageMode: "2",
				header: null,
				upPicUrl: null,
				imgStr: [],
				imgStr2: [],
				token: uni.getStorageSync('login').token,
				form: {
					// 公众号apid
					appid: '',
					// 公众号密钥
					appSecret: '',
					// 支付商户号
					mch_id: '',
					// apikey(V3)
					apikey: '',
					// 打款类型
					// transfer_type: '1',
					// 证书序列号
					serial_number: '',
					cret_file: '',
					key_file: ''
				},
				form1: {



					// 微信公众号appid
					m_appid: '',
					// 微信公众号appsecret
					//   m_appSecret: '',
					// 微信商户号
					m_mch_id: '',
					//   m_transfer_type: '2',
					// 微信支付密钥

					m_apikey: '',

					// 微信支付证书序列号
					m_serial_number: '',
					//微信支付cert(证书)文件
					m_cret_file: '',
					// 微信支付key文件
					m_key_file: '',
					//  服务商应用id
					sp_appid: '',
					//  服务商户号
					sp_mchid: '',
                    // v2 密钥
					s_apikey2:''



				},
				items: [{
						value: '1',
						name: '微信支付',

					},
					{
						value: '2',
						name: '微信服务商支付'
					},



				],
				paymentTypeItems: [{
						value: '1',
						name: '企业付款转账到微信',
						checked: 'true'
					}, {
						value: '2',
						name: '商家转账到零钱',
						checked: 'true'
					}

				],

				current: 0
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			async init(val) {

				const res = await this.$http.post({
					url: this.$api.config,
					data: {


					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				console.log(res)
				if (res.code == 0) {
					if (!val) {
						this.pay_type = res.data.pay_type
					}
					if (this.pay_type == 1) {
						this.$sun.assignObject(this.form, {
							...res.data
						})

						this.$nextTick(() => {
							this.$refs.selectimgandupload1.setItems([res.data.cret_file]);
							this.$refs.selectimgandupload2.setItems([res.data.key_file]);
						})
					} else {
						this.$sun.assignObject(this.form1, {
							...res.data
						})
						this.form.appSecret = res.data.appSecret
						this.$nextTick(() => {
							this.$refs.selectimgandupload1.setItems([res.data.m_cret_file]);
							this.$refs.selectimgandupload2.setItems([res.data.m_key_file]);
						})
					}




				}

			},
			radioChange: function(evt) {
				console.log(evt.detail.value)

				this.init('selsect')
				this.pay_type = evt.detail.value
			},
			radioChange1: function(evt) {
				console.log(evt.detail.value)
				this.transfer_type = evt.detail.value
			},
			// 上传图片返回
			imgLoaded1(e) {
				console.log(e)

				this.img = [];
				for (let i = 0; i < e.length; i++) {
					this.img.push(e[i].url);
				}


				this.imgStr = this.img

				if (this.pay_type == '1') {
					this.form.cret_file = this.imgStr.length === 1 ? this.imgStr[0].toString() : this.imgStr
						.join(',');
				} else {
					this.form1.m_cret_file = this.imgStr.length === 1 ? this.imgStr[0].toString() : this.imgStr
						.join(',');
				}
			},
			// “上传图片”发生改变
			imgsChange1(file) {

				console.log('上传发生改变this.storageMode1111============', this.storageMode, '参数file', file);
				// 如果是2 上传  阿里云 3  七牛云

				if (file.length) {
					this.upPicUrl = this.$api.upload;
					let filesNmae = 'nmoBackground_01.png'; // this.timeDate + 'png'
					this.imgFormData = {
						file: file,
						getsize: file.size,
						getContentType: ['image/png', 'image/jpeg'],
						getoriginalfilename: filesNmae,
						getName: filesNmae
					};
					this.$nextTick(() => {
						this.$refs.selectimgandupload1.upload(); //图片上传
					});
				} else {
					if (this.pay_type == '1') {
						this.form.cret_file = ''
					} else {
						this.form1.m_cret_file = ''
					}

					this.imgStr = []
				}

			},
			imgLoaded2(e) {
				console.log(e)

				this.img = [];
				for (let i = 0; i < e.length; i++) {
					this.img.push(e[i].url);
				}


				this.imgStr2 = this.img

				if (this.pay_type == '1') {
					this.form.key_file = this.imgStr2.length === 1 ? this.imgStr2[0].toString() : this.imgStr2
						.join(',');
				} else {
					this.form1.m_key_file = this.imgStr2.length === 1 ? this.imgStr2[0].toString() : this.imgStr2
						.join(',');

				}
			},
			// “上传图片”发生改变
			imgsChange2(file) {

				console.log('上传发生改变this.storageMode1111============', this.storageMode, '参数file', file);
				// 如果是2 上传  阿里云 3  七牛云

				if (file.length) {
					this.upPicUrl = this.$api.upload;
					let filesNmae = 'nmoBackground_01.png'; // this.timeDate + 'png'
					this.imgFormData2 = {
						file: file,
						getsize: file.size,
						getContentType: ['image/png', 'image/jpeg'],
						getoriginalfilename: filesNmae,
						getName: filesNmae
					};
					this.$nextTick(() => {
						this.$refs.selectimgandupload2.upload(); //图片上传
					});
				} else {
					if (this.pay_type == '1') {
						this.form.key_file = ''
					} else {
						this.form.m_key_file = ''
					}
					this.imgStr2 = []
				}

			},
			// 确定 
			submit() {

				this.$at.uniDoFunc({
					key: 'submit',
					success: async () => {
						this.$at.lockKey('submit');
						// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择




						if (this.pay_type == 1) {

						} else {

						}
						const formSumbmit = this.pay_type == '1' ? this.form : this.form1
						const res = await this.$http.post({
							url: this.$api.upConfig,
							data: {

								...formSumbmit,
								pay_type: this.pay_type

							},
							headers: {
								'Authorization': `Bearer ${this.token}`
							}

						})
						console.log(res)
						if (res.code == 0) {



							// 跳转到登录页面
							this.$at.releaseKey('submit');
							this.$sun.toast(res.msg, 'none')


						} else {
							this.$at.releaseKey('submit');
							this.$sun.toast(res.msg, 'none')
						}


					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.addSpecificationPage {
		padding: 16rpx;

		.reset {
			width: 260rpx;
			height: 88rpx;
			background: rgb(255, 255, 255);
		}

		.confirm {
			width: 428rpx;
			height: 88rpx;
			background-color: rgb(42, 137, 255);
			color: rgb(255, 255, 255);

			font-size: 32rpx;
			font-weight: 400;
		}

		.addSpecificationContent {

			background: rgb(255, 255, 255);
			padding: 30rpx;

			.edit {

				height: 88rpx;
				background: rgb(246, 248, 255);



			}

			.myNmae {

				background-color: #fff;
				min-width: 50rpx;

				.avatar {
					width: 84rpx;
					height: 84rpx;
				}

				input {
					text-align: right;
				}

				.backgroundImg {

					height: 154rpx;


				}

				.uni-textarea {
					margin-top: 20rpx;

					textarea {
						width: 100%;
						box-sizing: border-box;
						border-radius: 10px;


						border-radius: 10px;
						background-color: rgb(246, 251, 255);
						padding: 15rpx 15rpx 15rpx 15rpx;
					}
				}

			}
		}
	}

	page {
		background: #f6f6f6;
	}
</style>